import axios from "axios";
import { useEffect, useState } from "react";
import style from "./style.module.css";
import { InfiniteScroll, Image } from "antd-mobile";
import CustomImage from "../customImage";

/**
 * 新闻列表项接口定义
 * 包含新闻的所有字段信息
 */
interface ListItem {
  channel_name: string;  // 频道名称
  favor_num: number;     // 点赞数
  id: number;           // 唯一标识
  news_id: number;      // 新闻ID
  img: string;          // 图片URL
  image: string;        // 备用图片URL
  title: string;        // 新闻标题
  view_times: number;   // 浏览次数
  date_str: string;     // 发布日期字符串
  digest: string;       // 新闻摘要
  type: string;         // 新闻类型
  channel: string;      // 频道
  show_favor: boolean;  // 是否显示点赞
  has_wap_url: boolean; // 是否有wap链接
  channel_id: number;   // 频道ID
}

/**
 * Demo3 组件 - 无限滚动的新闻列表
 * 功能：
 * 1. 展示健康新闻列表
 * 2. 支持无限滚动加载更多数据
 * 3. 使用自定义图片组件显示新闻图片
 */
const Demo3 = () => {
  // 新闻列表数据
  const [list, setList] = useState<ListItem[]>([]);
  // 当前页码
  const [page, setPage] = useState(1);

  /**
   * 获取新闻数据的API调用函数
   * 调用健康新闻接口，获取指定页面的数据
   * 并将新数据追加到现有列表中
   */
  const getDataApi = async () => {
    const resp = await axios.get("/api/cooperation/wap/health_news/", {
      params: {
        from_wx_mini: 1,                    // 来源：微信小程序
        page: page,                         // 当前页码
        partner: "chunyu_wap_mini",        // 合作伙伴标识
        release_time: "2020-04-22%2010%3A30%3A00", // 发布时间筛选
        channel_id: 21,                     // 频道ID：21（健康频道）
      },
    });
    // 将新获取的数据追加到现有列表中
    setList(list.concat(resp.data.content_list));
    // 页码自增，为下次加载做准备
    setPage(page + 1);
  };

  return (
    <div>
      {/* 新闻列表容器 */}
      <div className="list">
        {list.map((v) => {
          return (
            <dl key={v.id} className={style.dl}>
              {/* 新闻图片 */}
              <dt>
                <CustomImage src={v.img}/>
              </dt>
              {/* 新闻内容 */}
              <dd>
                <h3>{v.title}</h3>        {/* 新闻标题 */}
                <div>{v.date_str}</div>   {/* 发布日期 */}
              </dd>
            </dl>
          );
        })}
      </div>
      
      {/* 无限滚动组件 */}
      <InfiniteScroll
        hasMore={true}                     // 还有更多数据可加载
        loadMore={async () => getDataApi()} // 加载更多数据时触发的函数
      ></InfiniteScroll>
    </div>
  );
};

export default Demo3;
